@import url('./font_family.css');

body {
    min-width: 1400px;
    overflow-y: scroll;
}

header {
    height: 74px;
}

button:hover {
    border-radius: 2px;
    opacity: .9;
}

@media screen and (max-width: 1400px) {
    body {
        overflow-x: scroll;
    }
}

/* 顶部栏 */
.navbar {   
    position: fixed;
    display: flex;
    align-items: center;
    top: 0;
    z-index: 1000;
    min-width: 1000px;
    width: 100%;
    height: 74px;
    background-color: #fff;
    box-shadow: 0px 0px 7px 0px #dee1e5, inset 0px 1px 0px 0px #dee1e5;
}

.navbar-logo {
    position: absolute;
    left: 3%;
}

.navbar-logo .img {
    width: 131px;
    height: 33px;
}

.navbar-nav {
    height: 100%;
    margin-left: 19%;
}

.navbar-nav ul {
    display: flex;
    height: 100%;
    align-items: center;
    margin: 0;
    padding: 0;
    list-style: none;
}

.navbar-tab {
    height: 100%;
}

.navbar-tab>a {
    
    display: flex;
    align-items: center;
    text-decoration: none;
    position: relative;
    height: 100%;
    margin-right: 57px;
    font-size: 14px;
    color: #252b3a;
    -webkit-transition: all 0.25s ease;
    -moz-transition: all 0.25s ease;
    transition: all 0.25s ease;
}

.navbar-tab>a:hover {
    color: #2f61f1;
}

.navbar-tab .down-icon:hover {
    color: #2f61f1;
}

.navbar-tab .down-icon:after {
    content: "";
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid #252b3a;
    /*三角形的颜色*/
    position: absolute;
    top: 50%;
    right: -20px;
    transform: translateY(-50%);
    opacity: 0.3;
}

.navbar-tab>a:hover:after {
    transform: rotate(180deg);
    top: 46%;
    right: -20px;
    border-top: 5px solid #2f61f1;
}

.navbar-tab-content {
    position: absolute;
    top: 74px;
    left: 0;
    z-index: 2;
    width: 100%;
    height: 0;
    background-color: #f1f3f6;
    overflow: hidden;
    transition: height 0.1s ease-out;
    box-shadow: inset 0 3px 8px rgb(95 126 209 / 16%);
}

.navbar-tab:hover .navbar-tab-content {
    height: 392px;
}

.navbar-tab-content .navbar-tab-content-header {
    width: 100%;
    height: 80px;
    background-color: rgba(236, 239, 244, 0.6);
}

.navbar-tab-content .ntc-content {
    width: 100%;
    min-height: 312px;
    background-color: #fff;
    padding-left: 289px;
    display: flex;
}

.navbar-tab-content-header {
    display: flex;
    align-items: center;
}

.navbar-tab-content-header img {
    margin-left: 289px;
    width: 52px;
    height: 45px;
    margin-right: 23px;
}

.navbar-tab-content-header .ntc-solution {
    
    font-size: 18px;
    color: #323847;
    margin-right: 13px;
}

.navbar-tab-content-header .ntc-devide {
    width: 1px;
    height: 19px;
    background-color: #a8aab0;
    margin-right: 20px;
}

.navbar-tab-content-header .ntc-describe {
    font-family: AliLight;
    font-size: 12px;
    color: #4c515f;
}

.ntc-content .sp-content {
    padding-top: 39px;
}

.ntc-content .sp-content .spc-row {
    display: flex;
    align-items: center;
    margin-bottom: 45px;
}

.ntc-content .spc-row .row-item {
    min-width: 152px;
    margin-right: 133px;
    cursor: pointer;
}

.ntc-content .spc-row .row-item:hover .item-name,
.ntc-content .spc-row .row-item:hover .detail
{
    color: #2f61f1;
    /* transition: all 0.3s ease-in-out;
    position: relative;
    top: -1px; */
}

.ntc-content .spc-row .row-item .item-name {
    /*  */
    font-size: 14px;
    color: #252b3a;
    font-weight: bold;
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

.ntc-content .spc-row .row-item .item-name .hot-icon {
    width: 32px;
    height: 13px;
    background-color: #fff0e3;
    
    font-size: 10px;
    color: #ff5400;
    margin-left: 10px;
    padding: 3px 6px;
    display: flex;
    justify-content: center;
}

.ntc-content .spc-row .row-item .item-name .new-icon {
    width: 32px;
    height: 13px;
    background-color: rgba(47, 97, 241, 0.1);
    
    font-size: 10px;
    color: #2f61f1;
    margin-left: 10px;
    padding: 3px 6px;
    display: flex;
    justify-content: center;
}

.ntc-content .spc-row .row-item .detail {
    /* font-family: AliThin; */
    font-size: 12px;
    color: #252b3a;
}

.ntc-content .safe-service-item {
    padding-top: 38px;
    margin-right: 191px;
}

.ntc-content .safe-service-item div {
    font-family: AliLight;
    font-size: 12px;
    line-height: 36px;
    color: #252b3a;
    cursor: pointer;
}

.ntc-content .safe-service-item div:hover, .ntc-content .safe-service-item a:hover {
    color: #2f61f1;
}

.ntc-content .ntcc-item {
    width: 200px;
    padding-top: 38px;
    margin-right: 86px;
}

.ntc-content .ntcc-item .ntcc-upper {
    
    font-size: 14px;
    color: #2f61f1;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(50, 56, 71, 0.11);
    margin-bottom: 19px;
}

.ntc-content .ntcc-item .ntcc-lower .ntcc-lower-item {
    font-family: AliLight;
    font-size: 12px;
    line-height: 36px;
    color: #252b3a;
    cursor: pointer;
}

.ntc-content .ntcc-item .ntcc-lower .ntcc-lower-item:hover {
    color: #2f61f1;
}

.ntc-content .ntcc-item .ntcc-lower .ntcc-lower-item a:hover {
    color: #2f61f1;
}

.navbar-button {
    position: absolute;
    right: 0;
    height: 100%;
    display: flex;
    align-items: center;
}

.navbar-button .phonecall {
    margin-left: 6px;
    margin-right: 30px;
    font-size: 14px;
    color: #252b3a;
    opacity: 0.5;
}

.navbar-button button {
    width: 112px;
    height: 100%;
    font-size: 14px;
    color: #fff;
    background-color: #2f61f1;
    border: none;
    border-radius: 2px;
}


/* 底部栏 */

.jx-footer {
    width: 100%;
    background-image: url('../img/index/footer/img_db_bg.png');
    background-size: 100% 100%;
}

.footer-main .footer-content {
    width: 79%;
}

.content-item {
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    opacity: .5;
}

.content-item-right {
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* width: 48%; */
    color: #ebf2ff;
}

.jx-footer .f-upper {
    width: fit-content;
    height: 208px;
    display: flex;
    padding-top: 40px;
}

.jx-footer .left-part {
    width: 105px;
    margin-right: 203px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.f-upper .jx-logo {
    width: 105px;
    height: 26px;
    margin-bottom: 22px;
}

.f-upper .qrcode {
    width: 99px;
    height: 118px;
    position: relative;
}

.f-upper .qrcode span {
    position: absolute;
    bottom: 16px;
    left: 49%;
    transform: translateX(-50%);
    font-family: AliLight;
    font-size: 12px;
    color: #ffffff;
    opacity: 0.6;
}

.f-upper .col {
    width: 160px;
}

.f-upper .col:not(:last-child) {
    margin-right: 73px;
}

.f-upper .col .title {
    font-family: AliMedium;
    font-size: 14px;
    color: #fcfcfd;
    opacity: 0.9;
    margin-bottom: 11px;
}

.f-upper .col .content {
    border-top: 1px solid rgb(236, 241, 248, 0.1);
    padding-top: 24px;
}

.f-upper .col .content .c-item, .f-upper .col .content .c-item a {
    font-family: AliLight;
    font-size: 12px;
    color: #dee3eb;
    margin-bottom: 18px;
    cursor: pointer;
    opacity: .65;
}

.f-upper .col .content .c-item, .f-upper .col .content .c-item a:hover {
    color: #3368ff;
    opacity: 1;
}

.f-upper .right-part {
    display: flex;
}

.f-medium {
    padding-top: 17px;
    padding-bottom: 13px;
    font-family: MicrosoftYaHei;
    font-size: 12px;
    color: #bdc4d2;
    opacity: 0.7;
    display: flex;
}

.f-medium .client {
    margin-right: 16px;
}

.f-medium .contact {
    margin-right: 14px;
}

.f-medium .worktime {
    margin-right: 52px;
}

.f-medium .email {
    margin-left: 13px;
}

.footer {
    line-height: 26px;
    padding-bottom: 20px;
}

.footer .content {
    width: 85%;
    font-family: AliThin;
    font-size: 14px;
    color: #ebf2ff;
    display: flex;
    justify-content: space-between;
}

.right-suspend {
    position: fixed;
    right: 27px;
    bottom: 30px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    z-index: 100;
}
.right-suspend-wrap{
    background-color: #fff;
    margin-bottom: 20px;
    border-radius: 48px;
    box-shadow: 0px 1px 5px 0px #d2d2d2;
}
.right-suspend .square {
    width: 48px;
    height: 48px;
    border-radius: 48px;
    /* background-color: #F6F7F9; */
    /* box-shadow: 0px 0px 1px 0px #d2d2d2; */
    /* font-family: AliLight; */
    font-size: 12px;
    color: #252b3a;
    padding: 12px;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
    line-height: 14px;
    cursor: pointer;
}

.phone-content:hover {
    box-shadow: 8px 8px 20px 0 rgba(55,99,170,.1);
}

/* .right-suspend .square:hover {
    box-shadow: 8px 8px 20px 0 rgba(55,99,170,.1);
} */

.right-suspend .service {
    background-color: #2f61f1 !important;
    width: 48px;
    height: 48px;
    border-radius: 48px;
    border: 1px #fff solid;
    box-shadow: 0px 2px 3px 0px #bbb;
    margin-bottom: 10px;
}
.right-suspend .apptrial:hover{
    color: #2f61f1;
}
.right-suspend .phone {
    background-color: #2f61f1 !important;
    border-radius: 4px 4px 0 0;
    margin-bottom: 0;
}

.right-suspend .phone img {
    width: 16px;
    height: 16px;
}

.right-suspend .phone-number {
    width: 48px;
    height: 112px;
    background-color: #F6F7F9;
    /* box-shadow: 0px 1px 5px 0px #d2d2d2; */
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
    padding-top: 12px;
    padding-bottom: 18px;
    border-radius: 0px 0px 4px 4px;
    box-sizing: border-box;
    cursor: pointer;
}

.right-suspend .phone-number span {
    font-family: AliMedium;
    font-size: 12px;
    color: #252b3a;
    white-space: nowrap;
    transform: rotate(90deg);
}

.right-suspend .code {
    position: relative;
}
.right-suspend .code .right-icon-lx{
    fill: #fff !important;
}
.right-suspend .code .right-icon{
    fill: #999 !important;
}
.right-suspend .code:hover .right-icon{
    fill: #3364F1 !important;
}

.right-suspend .code .code-hover-box {
    width: 200px;
    background-color: #ffffff;
    box-shadow: 0px 1px 5px 0px #d2d2d2;
    position: absolute;
    right: 59px;
    top: 0;
    display: none;
    border-radius: 4px;
}
.right-suspend .code .code-hover-box .chb {
    width: 100%;
    /* height: 77px; */
    padding: 10px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.right-suspend .code .code-hover-box .chb:not(:last-child) {
    border-bottom: 1px solid rgba(210, 210, 210, 0.3);
}

.right-suspend .code .code-hover-box .chb .left-p.hzimg {
    width: 32px;
	height: 32px;
    line-height: 32px;
    text-align: center;
	background-color: #f1f3f5;
    border-radius: 100%;
}
.right-suspend .code .code-hover-box .chb .left-p.hzimg img{
    width: 15px;
	height: 15px;
    vertical-align: middle;
}
.right-suspend .code .code-hover-box .chb .left-p .ewmimg {
    width: 56px;
	height: 56px;
}
.right-suspend .code .code-hover-box .chb .right-pl {
    display: flex;
    flex-direction: column;
    align-items: start !important;
    flex: 1;
    padding-left: 15px;
}
.right-suspend .code .code-hover-box .chb .right-p {
    display: flex;
    flex-direction: column;
    align-items: end;
}
.right-suspend .code .code-hover-box .chb .right-p span {
    font-family: AliLight;
	font-size: 12px;
	color: #252b3a;
    margin: 3px 0;
}
/* .right-suspend .code .code-hover-box .chb .right-p span:last-child {
    margin-bottom: 12px;
} */
.right-suspend .code .code-hover-box .chb .right-p img {
    width: 16px;
}

.right-suspend .top {
    display: none;
    width: 44px;
    height: 44px;
}

.right-suspend .to-top {
    width: 44px;
    height: 44px;
    background-color: #F6F7F9;
    box-shadow: 0px 1px 5px 0px #d2d2d2;
    border-radius: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border: 2px solid #fff;
}

.right-suspend  .to-top:hover {
    box-shadow: 8px 8px 20px 0 rgba(55,99,170,.1);
}

.right-suspend .to-top img {
    width: 16px;
    height: 13px;
}

#nb_icon_wrap{
    display: none !important;
}